<template>
	<div class="Icons">
		<swiper :options="swiperOption">
			<swiper-slide v-for="xxx in page">
				<div class="icon" v-for="(item,index) in xxx" :key='item.id'>
						<img :src="item.imgUrl" alt="" />
						<p>{{item.text}}</p>
				</div>
			</swiper-slide>
		</swiper>
		
	</div>
</template>

<script>

	export default {
		props:['iconList'],
		computed:{
			page(){
				const pages = [];
				this.iconList.forEach( (item,index)=>{
					
					const idx = Math.floor(index/8);
					
					if(!pages[idx]) pages[idx] = [];
					
					pages[idx].push(item)
					
					
				} )
				
				return pages;
			}
		},
		data () {
			return {
				swiperOption: {}
			}
		}
	}
	
	
	
</script>

<style scoped="scoped" lang="stylus">
	
	.Icons{
		overflow: hidden;
		height: 0;
		background: #fff;
		padding-bottom: 50%;
	}
	.icon{
		width: 25%;
		padding-bottom: 25%;
		float: left;
		position: relative;
	}
	.icon img{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: .44rem;
		width: 1.1rem;
		height: 1.1rem;
		margin: 0 auto;
	}
	
	.icon p{
		font-size: .28rem;
		position: absolute;
		left: 0;
		right: 0;
		text-align: center;
		bottom: .24rem;
		line-height: .24rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	
</style>